<template>
    <div>
        <van-nav-bar title="首 页">
            <template #right>
                <van-icon name="plus" size="18" @click="$router.push('/upload')" />
            </template>
        </van-nav-bar>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="swiper">
            <!-- 轮播图 -->
            <el-carousel :interval="4000" type="card" height="200px" class="swiper" arrow="always">
                <el-carousel-item v-for="item in lunbolist" :key="item.id">

                    <img v-lazy="item.imgs"  @click="$router.push(`/xiangqing/${item.id}/${item.type}`)">
                </el-carousel-item>
            </el-carousel>
            <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in lunbolist">
                    <img v-lazy="item.imgs" @click="$router.push(`xiangqing/${item.id}/${item.type}`)"></van-swipe-item>
            </van-swipe> -->
            <div class="list">


                <!-- <van-search v-model="keyword" shape="round" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" /> -->
                <!-- <van-row type="flex" justify="center">
            <van-col v-for="item in lunbolist" style="height: 10%;" span="6"><img :src="item.imgs" alt="" style="height: 10%;"></van-col>
        </van-row> -->
                <!-- <h3 class="animate" @click="$router.push('/upload')">
                    <p>点我试试,也可以上传喜欢的剧哦!</p>
                </h3> -->
                <!-- <span class="animate__animated ">点我试试,也可以上传喜欢的剧哦!</span> -->
                <span class="back1"></span>
                <span class="back2"></span>
                <span class="back3"></span>
                <span class="back4"></span>
                <span class="span1"></span>
                <span class="span2"></span>
                <span class="span3"></span>
                <span class="span4"></span>
                <span class="span5"></span>
                <span class="span6"></span>
                <span class="span7"></span>
                <span class="span8"></span>
                <span class="span9"></span>
                <span class="span10"></span>


                <van-divider content-position="left"
                    :style="{ color: '#f8f9f9', borderColor: '#f8f9f9', padding: '0 16px' }">
                    <h4>电影Top10</h4>
                </van-divider>

                <div class="movie">
                    <div class="item" v-for="item in movie" :key="item.index"
                        @click="$router.push(`/xiangqing/${item.id}/${item.type}`)">
                        <img  v-lazy="item.imgs" alt="">

                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <van-divider content-position="left"
                    :style="{ color: '#f8f9f9', borderColor: '#f8f9f9', padding: '0 16px' }">
                    <h4>动漫Top10</h4>
                </van-divider>

                <div class="movie">
                    <div class="item" v-for="item in dongman" :key="item.index"
                        @click="$router.push(`/xiangqing/${item.id}/${item.type}`)">
                        <img  v-lazy="item.imgs" alt="">

                        <span>{{ item.name }}</span>

                    </div>
                </div>
                <van-divider content-position="left"
                    :style="{ color: '#f8f9f9', borderColor: '#f8f9f9', padding: '0 16px' }">
                    <h4>电视Top10</h4>
                </van-divider>

                <div class="movie">
                    <div class="item" v-for="item in dianshi" :key="item.index"
                        @click="$router.push(`/xiangqing/${item.id}/${item.type}`)">
                        <img  v-lazy="item.imgs" alt="">

                        <span>{{ item.name }}</span>

                    </div>
                </div>
            </div>
        </van-pull-refresh>

    </div>
</template>

<script>
import httpApi from "../../http/index";
import 'animate.css';
import { mapMutations, mapState } from 'vuex'
export default {
    data() {
        return {
            // 下拉刷新
            count: 0,
            isLoading: false,
            // keyword: '',
            lunbolist: [],
            dianshi: [],
            dongman: [],
            movie: [],
            date: new Date()
        }
    },
    //获取首页信息到vuex中 
    // 需要调用computed方法  简便引入vuex 中的user
    computed: {
        ...mapState(['indexlunbo', 'indexdianshi', 'indexdongman'])

    },
    methods: {
        ...mapMutations(['saveIndexlunbo', 'saveIndexdianshi', 'saveIndexdongman', 'saveIndexmovie']),
        // 下拉刷新
        onRefresh() {
            setTimeout(() => {
                this.count++;
                console.log('刷新成功!刷新次数', this.count);
                this.isLoading = false;
                this.toplist()
                this.dianshilist()
                this.dongmanlist()
                this.movielist()
            }, 1000);
        },

        // 获取轮播图数据
        toplist() {

            httpApi.yinshiApi.querytop().then(res => {
                console.log(res);
                this.lunbolist = res.data.data
                this.saveIndexlunbo(this.lunbolist)
            }).catch(err => {
                console.log(err);
            })
        },
        // 获取电视数据
        dianshilist() {
            let params = { page: 1, pagesize: 10. }
            httpApi.dianshiApi.querydianshi(params).then(res => {
                console.log(res);
                this.dianshi = res.data.data.result
                this.saveIndexdianshi(this.dianshi)
            }).catch(err => {
                console.log(err);
            })
        },
        // 获取动漫数据
        dongmanlist() {
            let params = { page: 1, pagesize: 10. }
            httpApi.dongmanApi.dongmanApi(params).then(res => {
                console.log(res);
                this.dongman = res.data.data.result
                this.saveIndexdongman(this.dongman)

            }).catch(err => {
                console.log(err);
            })
        },
        // 获取电影数据
        movielist() {
            let params = { page: 1, pagesize: 10. }
            httpApi.movieApi.queryMovie(params).then(res => {
                console.log(res);
                this.movie = res.data.data.result
                this.saveIndexmovie(this.movie)

            }).catch(err => {
                console.log(err);
            })
        },
        // 判断是否存在存储数据 进行更新数据
        Updatedata() {
            // 初始加载轮播图 数据 判断是否有存储数据
            if (this.$store.state.indexlunbo) {
                this.lunbolist = this.$store.state.indexlunbo
            } else {
                // 不存在就发送请求
                this.toplist()
            }
            // 加载电视
            if (this.$store.state.indexdianshi) {
                this.dianshi = this.$store.state.indexdianshi
            } else {
                this.dianshilist()
            }
            // 加载动漫
            if (this.$store.state.indexdongman) {
                this.dongman = this.$store.state.indexdongman
            } else {
                this.dongmanlist()
            }
            // 加载电影
            if (this.$store.state.indexmovie) {
                this.movie = this.$store.state.indexmovie
            } else {
                this.movielist()
            }
        },


    },
    // 挂载
    mounted() {
        if (this.date.getHours() == 10 || this.date.getHours() == 16) {
            console.log("上午十点和下午四点更新数据");
            this.toplist()
            this.dianshilist()
            this.dongmanlist()
            this.movielist()

        } else {

            this.Updatedata()
            console.log("判断后更新数据");
        }
    }
}
</script>



<style scoped>
* {
    box-sizing: border-box;
}

/* #app > div > div:nth-child(1) > div.swiper.van-nav-bar.van-hairline--bottom > div{

} */
.swiper {
    background-color: #1b1b1e;
    padding-top: 2%;
    overflow: hidden;
}

/* 轮播图 */


.el-carousel__item {
    text-align: center;
    /* background-color: #454547; */
    /* background-color: transparent !important; */
}

#app>div>div:nth-child(1)>div.van-nav-bar.van-hairline--bottom>div>div.van-nav-bar__right>i {
    color: #323233;

}

.el-carousel__item img {
    height: 100%;
    width: 80%;
    object-fit: cover;
}

.el-carousel__item:nth-child(2n) {
    background-color: transparent !important;

}

.el-carousel__item:nth-child(2n+1) {
    background-color: transparent !important;



}

.animate {
    text-align: center;
    padding: 5% 0;
    width: 100%;
    display: block;
    overflow: clip;
    color: white;

}




.movie {
    display: inline-block;
    display: flex;
    width: 365px;
    overflow-x: auto;
}

.movie .item {
    margin-bottom: 10px;
}

.list {
    padding-bottom: 12%;
    background-image: linear-gradient(231deg, #71d7ed, #e6e983 69%, #f0b094);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.list>.span1 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 50%;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 3.5s linear infinite;
}

.list>.span2 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 10%;
    width: 30px;
    height: 30px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 4.5s linear infinite;
    animation-delay: 0.2s;
    /* animation-duration: 6s; */
}

.list>.span3 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 70%;
    width: 30px;
    height: 30px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 5.5s linear infinite;
    animation-delay: 0.7s;
}

.list>.span4 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 80%;
    width: 30px;
    height: 30px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 6.5s linear infinite;
    animation-delay: 1.2s;
}

.list>.span5 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 90%;
    width: 20px;
    height: 20px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 7.5s linear infinite;
    animation-delay: 1s;
}

.list>.span6 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 20%;
    width: 30px;
    height: 30px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 9s linear infinite;
    animation-delay: 0.6s;
}

.list>.span7 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 30%;
    width: 15px;
    height: 15px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 10.5s linear infinite;
    animation-delay: 0.4s;
}

.list>.span8 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 40%;
    width: 30px;
    height: 30px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 7s linear infinite;
    animation-delay: 0.9s;
}

.list>.span9 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 15%;
    width: 20px;
    height: 20px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 6s linear infinite;
    animation-delay: 0.8s;
}

.list>.span10 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 75%;
    width: 20px;
    height: 20px;
    background-image: linear-gradient(226deg,#71d7ed, #e6e983 , #f0b094);
    border-radius: 50%;
    animation: anistar 6.5s linear infinite;
    animation-delay: 0.2s;
}



@keyframes anistar {
    0% {
        transform: rotate(90deg) translateX(0);
        opacity: 1;
    }

    20% {
        transform: rotate(90deg) translateX(-200px);

        opacity: 0.8;

    }

    40% {
        transform: rotate(90deg) translateX(-400px);

        opacity: 0.6;
    }

    60% {
        transform: rotate(90deg) translateX(-600px);
        opacity: 0.6;
    }

    80% {
        transform: rotate(90deg) translateX(-800px);
        opacity: 0.4;
    }

    100% {
        transform: rotate(90deg) translateX(-900px);
        opacity: 0.2;
    }
}



.list .back1 {
    width: 120px;
    height: 120px;
    border-radius: 200px;
    position: absolute;
    z-index: 1;
    right: 0;
    top: -50px;
    transform: translateX(50%);
    opacity: .36;
    background-image: linear-gradient(226deg, #71d7ed, #e6e983 69%, #f0b094);
}

.list .back2 {
    width: 200px;
    height: 200px;
    border-radius: 200px;
    position: absolute;
    z-index: -1;
    right: 0;
    top: 100px;
    transform: translateX(40%);
    opacity: .36;
    background-image: linear-gradient(226deg, #71d7ed, #e6e983 69%, #f0b094);
}

.list .back3 {
    width: 100px;
    height: 100px;
    border-radius: 200px;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 300px;
    transform: translateX(50%);
    opacity: .8;
    background-image: linear-gradient(226deg, #71d7ed, #e6e983 69%, #f0b094);
}

.list .back4 {
    width: 150px;
    height: 150px;
    border-radius: 200px;
    position: absolute;
    z-index: -1;
    right: 0;
    top: 500px;
    /* transform: translateX(50%); */
    opacity: .8;
    background-image: linear-gradient(226deg, #71d7ed, #e6e983 69%, #f0b094);
}

.movie img {
    display: inline-block;
    border-radius: 5%;
    height: 150px;
    width: 110px;
    margin: 0 15px;
    /* overflow-clip-margin: content-box; */
    /* overflow: clip; */
    object-fit: cover;
}

.movie span {
    text-align: center;
    display: block;
    font-size: 13px;
    color: white;
}

.my-swipe .van-swipe-item>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-swipe .van-swipe-item {
    /* width: 60px; */
    height: 300px;
    text-align: center;
    /* border: 1px solid #333; */
}</style>